<template>
  <div id="tab-list">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基础属性" name="baseProp">
        <Formily></Formily>
      </el-tab-pane>
      <el-tab-pane label="事件响应" name="events">
        事件响应
        <EventResponse
        
        >
        </EventResponse>
      </el-tab-pane>
      <el-tab-pane label="数据格式" name="dataContext">
        数据格式
        <!-- <DataFormat ref="jsonEditor" v-model="content">
          <el-row type="flex" justify="center" style="margin-top: 10px">
            <el-button type="primary" @click="onJsonSave" size="mini"
              >保存</el-button
            >
          </el-row>
        </DataFormat> -->
      </el-tab-pane>
      <el-tab-pane label="动画效果" name="animation"> 动画 </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Formily from "./EditContextFont";
import EventResponse from "./EventsResponse";
import DataFormat from "./DataFormat";
export default {
  name: "EditArea",
  data() {
    return {
      activeName: "baseProp",
      content: '{"username":"tom", "age":20,"info": {"tel":"123456","cellphone":"98765"},"address":[{"city":"shanghai","postcode":"201203"},{"city":"suzhou","postcode":"200000"}]  } ',
    };
  },
  components: {
    Formily,
    EventResponse,
    DataFormat,
  },
  methods: {
    handleClick() {},
    changeTextarea(val) {
      try {
        const a = Function(val);
        console.log(a());
      } catch {
        return;
      }
    },
    onJsonSave() {
      let value = this.$refs.jsonEditor.getValue();
      if (this.jsonValue !== value) {
        this.jsonValue = value;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#tab-list {
  width: 320px;
  height: 100%;
  overflow: auto;
  color: #fff !important;
  background-color: rgb(68, 68, 68);
  padding: 0px 10px;
}
</style>